<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 写移动端一定要加上理想视口 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>苏宁易购(Suning.com)-家电家装成套购，专注服务省心购！</title>
    <!-- 清除默认样式 -->
    <link rel="stylesheet" href="../css/normalize.css">
    <!-- 引入自己的样式 -->
    <link rel="stylesheet" href="../css/index.min.css">
    <link rel="icon" href="../imgs/icons.jpg">
</head>

<body>
    <!-- 头部 -->
    <div class="header">
        <div class="header-top">
            <a href="">
                <img src="../imgs/category.png" alt="">
            </a>
            <a href="">
                <img src="../imgs/top.gif" alt="">
            </a>
            <a href="">
                <img src="../imgs/login.png" alt="">
            </a>
        </div>
        <div class="header-search">
            <div class="header-search-border">
                <i></i>
                <input type="text" placeholder="强哥好帅">
            </div>
        </div>
    </div>

    <!-- 分类 -->
    <div class="category">
        <li>
            <img src="../imgs/c1.png" alt="">
            <p>苏宁家电</p>
        </li>
        <li>
            <img src="../imgs/c1.png" alt="">
            <p>苏宁家电</p>
        </li>
        <li>
            <img src="../imgs/c1.png" alt="">
            <p>苏宁家电</p>
        </li>
        <li>
            <img src="../imgs/c1.png" alt="">
            <p>苏宁家电</p>
        </li>
        <li>
            <img src="../imgs/c1.png" alt="">
            <p>苏宁家电</p>
        </li>
        <li>
            <img src="../imgs/c1.png" alt="">
            <p>苏宁家电</p>
        </li>
        <li>
            <img src="../imgs/c1.png" alt="">
            <p>苏宁家电</p>
        </li>
        <li>
            <img src="../imgs/c1.png" alt="">
            <p>苏宁家电</p>
        </li>
        <li>
            <img src="../imgs/c1.png" alt="">
            <p>苏宁家电</p>
        </li>
        <li>
            <img src="../imgs/c1.png" alt="">
            <p>苏宁家电</p>
        </li>
    </div>

    <!-- 广告 -->
    <div class="banner">
        <a href="">
            <img src="../imgs/b1.gif" alt="">
        </a>
        <a href="">
            <img src="../imgs/b2.gif" alt="">
        </a>
        <a href="">
            <img src="../imgs/b3.gif" alt="">
        </a>
    </div>

    <!-- 还是广告 -->
    <div class="banner2">
        <li>
            <a href="">
                <img src="../imgs/b2-img1.jpg" alt="">
                <span>&yen;998</span>
            </a>
            <a href="">
                <img src="../imgs/b2-img1.jpg" alt="">
                <span>&yen;998</span>
            </a>
        </li>
        <li>
            <a href="">
                <img src="../imgs/b2-li2.png" alt="">
                <span>领套购神券</span>
            </a>
            <a href="">
                <img src="../imgs/b2-li2.png" alt="">
                <span>领套购神券</span>
            </a>
        </li>
    </div>

    <div class="banner2">
        <li>
            <a href="">
                <img src="../imgs/b2-img1.jpg" alt="">
                <span>&yen;998</span>
            </a>
            <a href="">
                <img src="../imgs/b2-img1.jpg" alt="">
                <span>&yen;998</span>
            </a>
        </li>
        <li>
            <a href="">
                <img src="../imgs/b2-li2.png" alt="">
                <span>领套购神券</span>
            </a>
            <a href="">
                <img src="../imgs/b2-li2.png" alt="">
                <span>领套购神券</span>
            </a>
        </li>
    </div>

    <!-- 轮播图的部分 -->
    <div class="swiper">
        <div class="swiper-imgs">
            <!-- 这里后续加上轮播图 -->
            <img src="../imgs/phone.jpg" alt="">
        </div>
        <div class="swiper-lis">
            <li>
                <div>
                    <p>圣诞好礼</p>
                    <img src="../imgs/phone.jpg" alt="">
                    <p>祝你安康</p>
                </div>
                <div>
                    <p>圣诞好礼</p>
                    <img src="../imgs/phone.jpg" alt="">
                    <p>祝你安康</p>
                </div>
            </li>
            <li>
                <div>
                    <p>圣诞好礼</p>
                    <img src="../imgs/phone.jpg" alt="">
                    <p>祝你安康</p>
                </div>
                <div>
                    <p>圣诞好礼</p>
                    <img src="../imgs/phone.jpg" alt="">
                    <p>祝你安康</p>
                </div>
            </li>
        </div>
    </div>

    <!-- 猜你喜欢 -->
    <div class="like">
        <div class="like-title">
            <img src="../imgs/like-title.webp" alt="">
        </div>
        <div class="like-content">

        </div>
    </div>

    <!-- tabbar选项卡 -->
    <div class="tabbar">
        <li>
            <a href="./index.html">
                <img src="../imgs/home.png" alt="">
                <p>首页</p>
            </a>
        </li>
        <li>
            <a href="./category.html">
                <img src="../imgs/tabbar-serach.png" alt="">
                <p>分类</p>
            </a>
        </li>
        <li>
            <a href="./inventory.html">
                <img src="../imgs/tabbar-main.png" alt="">
                <p>必抢清单</p>
            </a>
        </li>
        <li>

            <a href="./shoping.html">
                <img src="../imgs/tabbar-shop.png" alt="">
                <p>购物车</p>
            </a>
        </li>
        <li>
            <a href="./me.html">
                <img src="../imgs/tabbar-me.png" alt="">
                <p>我的</p>
            </a>
        </li>
    </div>
</body>
<!-- 引入你自己的js文件 -->
<script src="../js/index.js"></script>

</html>